<template>
  <view class="timeline-item relative mb-[60rpx]">
    <view
      class="content-card bg-white rounded-[24rpx] shadow-[0_10rpx_30rpx_rgba(0,0,0,0.08)] overflow-hidden border border-gray-100 transition-all duration-300 transform hover:translate-y-[-5rpx] hover:shadow-[0_15rpx_40rpx_rgba(39,197,48,0.15)]"
      @click="toggleDetail(record.id)"
    >
      <view class="main-info p-[30rpx] transition-colors duration-300 relative">
        <!-- 装饰元素 -->
        <view class="absolute top-0 left-0 w-[12rpx] h-full bg-gradient-to-b from-green-300 to-green-500"></view>

        <view class="flex items-start justify-between pl-[16rpx]">
          <!-- 医院信息 -->
          <view class="hospital-info flex-1">
            <text class="hospital-name block text-[32rpx] text-gray-800 font-bold mb-[16rpx]">{{ record.vaccName }}</text>
            <view class="department-badge bg-gradient-to-r from-blue-500 to-blue-600 px-[20rpx] py-[6rpx] rounded-[16rpx] inline-block shadow-sm">
              <text class="department-text text-white text-[24rpx] font-bold">{{ record.vaccUnit }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="action-buttons mt-[30rpx] flex gap-[20rpx]">
        <nut-button size="small" class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-green-500 to-green-600 border-0 shadow-md" @click.stop="goEdit(record.id)">
          <template #icon>
            <IconFont name="edit" class="text-[24rpx] mr-[8rpx]" />
          </template>
          编辑
        </nut-button>
        <nut-button size="small" class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-red-500 to-red-600 border-0 shadow-md" @click.stop="deleteRecord(record.id)">
          <template #icon>
            <IconFont name="del" class="text-[24rpx] mr-[8rpx]" />
          </template>
          删除
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

const emit = defineEmits(["edit", "delete"]);

const props = defineProps({
  record: {
    type: Object as PropType<any>,
  },
});


function toggleDetail(id: string) {}

function goEdit(id: string) {
  emit("edit", id);
}

async function deleteRecord(id: string) {
  emit("delete", id);
}
</script>
